<script setup lang="ts">
import {
    NButton, NModal, NFlex, NMention,
    NForm, NFormItem, NInput, NInputNumber, NTreeSelect, NRadioGroup, NRadio
    , type FormInst
} from 'naive-ui';

import {useFeature} from "~/common/mixins/";
import { type SysDept } from '@/apis/models';
import { useMessage } from "naive-ui";

import { reactive, ref } from 'vue';
import { useDeptStore } from "@/store/orgnization/deptStore";


defineProps({
    options: Array
})

let deptStore = useDeptStore()

let { UpdateOne } = useFeature()

let message = useMessage();
let ruleFormRef = ref<FormInst>();

let emits = defineEmits(["handleQuery"])


let state = reactive({
    ruleForm: {} as SysDept,
    showModal: false,
    mentionLoading: false,
    options: {} as any,
    userOptions: {} as any
})

let labelWidth = ref(80)
let deptRules = ref({
    fdParentId: {
        required: true,
        message: "请选择上级部门",
        trigger: ["blur", "change"]
    },
    fdName: {
        required: true,
        message: "请输入部门名称",
        trigger: "blur"
    }
})


let onSubmit = (e: MouseEvent) => {
    e.preventDefault()
    ruleFormRef.value?.validate((errors) => {
        if (!errors) {
            UpdateOne(deptStore, state.ruleForm).then((res: any) => {
                if (res.code == 200) {
                    message.success("数据修改成功");
                    state.showModal = false;
                    closeDialog()
                }
            })
        }
        else {
            console.log(errors)
        }
    })
}

function openDialog(row: any, listDatas: any[]) {
    state.ruleForm = JSON.parse(JSON.stringify(row));
    state.showModal = true;
    state.options = listDatas
}

let handleParentValue = (
    value: any,
    _: any
) => {
    state.ruleForm.fdParentId = value
}

let handleMention = () => {

}

let closeDialog = () => {
    emits('handleQuery')
    state.showModal = false;
}


defineExpose({ openDialog });
</script>

<template>
    <div class="mc_1">
        <n-modal content-style="padding:10px;" style="width:54%;" title="添加部门" :show-icon="false" :bordered="true"
            v-model:show="state.showModal" preset="dialog">

            <template #default>
                <n-form ref="ruleFormRef" :title="'部门'" require-mark-placement="right-hanging" :rules="deptRules"
                    :model="state.ruleForm" :label-width="labelWidth" label-placement="left">
                    <n-form-item label="上级部门">
                        <n-tree-select placeholder="请选择上级部门" :options="state.options" v-model:value="state.ruleForm.fdParentId"
                            @update-value="handleParentValue" />
                    </n-form-item>
                    <n-form-item path="fdName" label="部门名称">
                        <n-input v-model:value="state.ruleForm.fdName" placeholder="请输入部门名称"></n-input>
                    </n-form-item>
                    <n-form-item :show-require-mark="true" label="显示排序">
                        <n-input-number style="width:100%;" v-model:value="state.ruleForm.fdOrder"
                            placeholder=""></n-input-number>
                    </n-form-item>
                    <n-form-item label="负责人">
                        <n-mention v-model:value="state.ruleForm.fdManager" :options="state.userOptions"
                            default-value="@" placeholder="输入@可以选择用户" :loading="state.mentionLoading"
                            @search="handleMention" />
                    </n-form-item>
                    <n-form-item label="联系电话">
                        <n-input placeholder="请输入联系电话" v-model:value="state.ruleForm.fdPhone"></n-input>
                    </n-form-item>
                    <n-form-item label="邮箱">
                        <n-input placeholder="请输入邮箱" v-model:value="state.ruleForm.fdEmail"></n-input>
                    </n-form-item>
                    <n-form-item label="部门状态">
                        <n-radio-group name="radiogroup" v-model:value="state.ruleForm.fdStatus">
                            <n-space>
                                <n-radio :value="1" key="1">
                                    启用
                                </n-radio>
                                <n-radio :value="0" key="0">
                                    禁用
                                </n-radio>
                            </n-space>
                        </n-radio-group>
                    </n-form-item>
                    <n-form-item>
                        <n-flex style="width:fit-content;position:absolute;right:0;">
                            <n-button type="primary" @click="onSubmit">确定</n-button>
                            <n-button @click="closeDialog">取消</n-button>
                        </n-flex>
                    </n-form-item>
                </n-form>
            </template>
        </n-modal>
    </div>

</template>

<style scoped>
.toolbar {
    padding: 10px 0 10px 10px;

    .n-button:first-child {
        margin-right: 10px;
    }
}
</style>
